<template>
	<view>
		<!-- 若需显示自定义导航栏，需要在App.vue中引入Vue -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">订单确认</block>
		</cu-custom>

		<scroll-view scroll-y="true">
			<view>
				<view class="hotelInfoArea infoLabelArea shadow">
					<view class="hotelLabel titleLabel bg-olive">
						<view>
							<text class="cuIcon-homefill text-lg" style="margin-left: 10upx;margin-right: 10upx; font-size: 18px;"></text>
							<text style="font-size: 18px;">民宿信息</text>
						</view>
					</view>
					<view class="hotelInfo">
						<view class="hotelImg">
							<image :src="'https://www.2306.tech/CCShop/' + hotel.hTitleImage" mode="aspectFill" style="width: 300upx; height: 200upx; border-radius: 20upx;"></image>
						</view>
						<view class="hotelInfoLabel">
							<view class="hotelName">{{hotel.hName}}</view>
							<view class="hotelAddress">
								<text>地址：</text>
								{{hotel.hAddress}}
							</view>
							<view class="hotelPrice">
								<text style="font-size: 15px;">单价：</text>
								<text class=" text-price text-red" style="font-size: 15px;">
									{{hotel.hPrice}}/晚
								</text>
							</view>
						</view>
					</view>
				</view>

				<view class="dateInfoArea infoLabelArea shadow">
					<view class="dateLabel titleLabel bg-olive">
						<view>
							<text class="cuIcon-calendar text-lg" style="margin-left: 10upx;margin-right: 10upx; font-size: 18px;"></text>
							<text style="font-size: 18px;">住离日期</text>
						</view>
					</view>

					<view class="chooseDateButton">
						<button class="cu-btn round bg-green shadow" @click="chooseDate">选择日期</button>
					</view>
					
					<view class="daysInfo">
						<view class="startDays">
							<view><b>入住日期</b></view>
							<view>{{dateStart}}</view>
						</view>
						
						<view class="during">
							<view><b>天数</b></view>
							<view style="color: red;">{{days}}天</view>
						</view>
						
						<view class="endDays">
							<view><b>离店日期</b></view>
							<view>{{dateEnd}}</view>
						</view>
						
					</view>
					
					
					<!-- <view class="cu-form-group">
						<view class="title">入住日期</view>
						<picker mode="date" :value="dateStart" start="2015-09-01" end="2020-09-01" @change="dateStartChanger">
							<view class="picker">
								{{dateStart}}
							</view>
						</picker>
					</view>
					
					<view class="cu-form-group">
						<view class="title">离店日期</view>
						<picker mode="date" :value="dateStart" start="dateStart" end="2020-09-01" @change="dateEndChanger">
							<view class="picker">
								{{dateEnd}}
							</view>
						</picker>
					</view> -->
					
				</view>

				<view class="personInfoArea infoLabelArea shadow">
					<view class="personLabel titleLabel bg-olive">
						<view>
							<text class="cuIcon-peoplefill text-lg" style="margin-left: 10upx;margin-right: 10upx; font-size: 18px;"></text>
							<text style="font-size: 18px;">入住人信息</text>
						</view>
					</view>
					
					<view class="customerInfo">
						<view class="cu-form-group">
							<view class="title">姓名：</view>
							<input placeholder="姓名" name="input"  v-model="user.userRealName"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">手机号：</view>
							<input placeholder="联系电话" name="input" type="number" v-model="user.userPhoneCall"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">身份证号：</view>
							<input placeholder="身份证号" name="input" type="idcard" v-model="idCardNo"></input>
						</view>
					</view>
					
				</view>

	</view>
	</scroll-view>
	
	<view class="bottomBar">
		<view class="bottomPrice basis-lg bg-white">
			<view class="price" style="margin-left: 30upx; margin-top: 28upx;">
				<view class="totalPrice">
					<text style="font-size: 16px; color: black;">合计：</text>
					<text class="text-price" style="color: red;font-size: 16px;">{{days * hotel.hPrice}} </text>
				</view>
			</view>
		</view>
		<view class="bottomPay basis-sm bg-green" 
		style="text-align: center; padding-top: 25upx; font-size: 18px;"
		hover-class="navigator-hover" @click="submitOrder"
		>
			<text class="cuIcon-card" style="margin-right: 10upx;"></text>
			去支付
		</view>
	</view>


	</view>
</template>

<script>
	import { getHomestayById } from '../../api/homestayAPI.js'
	import { createHOrder } from '../../api/hOrderAPI.js'
	export default {
		data() {
			return {
				hotel: {
					// hStatus: "1",
					// hId: "2002",
					// hTag: "[Ljava.lang.String;@17a79f65;",
					// hRoom: "2",
					// hAddress: "阜平县坊里村",
					// hTitleImage: "images/homestay/2002/2002-0.jpg",
					// hDetailImage: "images/homestay/2002/2002-0.jpg;images/homestay/2002/2002-1.jpg;images/homestay/2002/2002-2.jpg;images/homestay/2002/2002-3.jpg",
					// hSize: "40",
					// hPosition: "114.139366;38.763557",
					// hName: "树屋民宿",
					// hBedCount: "1",
					// hPrice: "429",
					// hPhone: "",
					// hPeople: "2",
					// hToilet: "1",
					// hHall: "1",
					// hAspect: "1",
					// hDescription: "独特别致",
					// hRemark: ""
				},
				user: {},
				dateStart: '',
				dateEnd: '',
				days: 0,
				totalPrice:'',
				idCardNo:''
			}
		},
		methods: {
			chooseDate(){
				uni.navigateTo({
					url:'../calendar/calendar'
				})
			},
			dateStartChanger(e) {
				this.dateStart = e.detail.value
			},
			dateEndChanger(e) {
				this.dateEnd = e.detail.value
			},
			submitOrder() {
				if('' == this.dateStart || '' == this.dateEnd || '' == this.days ) {
					uni.showModal({
						title:'请检查',
						content:'住离时间不得为空',
						showCancel:false
					})
					return false
				}
				
				if('' == this.user.userRealName || '' == this.user.userPhoneCall || '' == this.idCardNo ) {
					console.log("this.user.userRealName: ",this.user.userRealName);
					console.log("this.user.userPhoneCall: ",this.user.userPhoneCall);
					console.log("this.idCardNo: ",this.idCardNo);
					uni.showModal({
						title:'请检查',
						content:'入住人信息不得为空',
						showCancel:false
					})
					return false
				}
				
				uni.showLoading({
					title:'正在创建订单'
				})
				let order = {
					hHomestayId: this.hotel.hId,
					hUserOpenId: this.user.userOpenid,
					hOrderName: this.hotel.hName,
					hUserName: this.user.userRealName,
					hUserPhone: this.user.userPhoneCall,
					hUserIdno: this.idCardNo,
					hOrderCheckinDate: this.dateStart,
					hOrderCheckoutDate: this.dateEnd,
					hOrderDays: this.days,
					hSinglePrice: this.hotel.hPrice,
					hTotalPrice: this.hotel.hPrice * this.days,
					hDiscountPrice: '0',
					hFactPrice: this.hotel.hPrice * this.days,
					hScore: this.hotel.hPrice * this.days * 10
				}
				console.log("order: ",order);
				createHOrder(order).then(resp => {
					if('true' == resp.result ){
						console.log('下单成功')
						let orderId = resp.orderId;
						uni.hideLoading()
						uni.navigateTo({
							url:'../pay/pay?type=2&id='+orderId
						})
					}
				})
				
			}
		},
		onLoad() {
			this.dateStart = ''
			this.dateEnd = ''
			this.days = ''
			this.hotelId = ''
			
			uni.getStorage({
				key:'hotelId',
				success:(res)=>{
					let hotelId = res.data
					getHomestayById(hotelId).then(resp => {
						console.log(resp)
						this.hotel = resp
					})
				}
			})
			// const app = getApp();
			// const user = app.globalData.user
			// this.user = user
			
			
			// uni.clearStorage({
			// 	key : 'Time',
			// })
		},
		onShow() {
			let user = getApp().globalData.user
			this.user = user;
			
			uni.getStorage({
				key:'Time',
				success:(res)=>{
					if(res && res.data){
						const data = JSON.parse(res.data)
						this.dateStart = data.start
						this.dateEnd = data.end
						this.days = data.day
						// console.log("res.data: ",data);
					}
				}
			})
		}
	}
</script>

<style>
	@import url("./hotelOrderInput.css");
</style>
